<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/jquery.js"></script>
    <link href="../style/default.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../style/style.css">
    <script src="../js/highlight.min.js"></script>
    <script>
    hljs.initHighlightingOnLoad();
    </script>
    <script src="../js/initTemp.js"></script>
</head>

<body>
    <div class="qcanvas_lay">
        注：文字也是有层级关系的<br>
        <canvas id="qcanvas"></canvas>
    </div>
    <div class="code_lay">
        <pre><code class="js">var qcanvas = new Qcanvas({
    	id: 'qcanvas',
	    width: 300,
	    height: 200,
    });

    var redRect = qcanvas.rect({
        start: [0, 0],
        width: 200,
        height: 200,
        drag: false,
        borderColor: 'red',
        fillColor: 'red',
    })

    var greenRect = qcanvas.rect({
        start: [50, 50],
        width: 170,
        height: 170,
        drag: false,

        borderColor: 'green',
        fillColor: 'green',
    })
    var blueRect = qcanvas.rect({
        start: [100, 100],
        width: 120,
        height: 120,
        drag: false,
        borderColor: 'blue',
        fillColor: 'blue',
    })


    qcanvas.text({
        start: [200, 40],
        text: 'redRect上移一层',
        color: 'blue',
        fontSize: '16px',
        drag: false,
        mouseup: function(pos) {

            qcanvas.raise(redRect);


        }
    })

    qcanvas.text({
        start: [200, 60],
        text: 'redRect下移一层',
        color: 'blue',
        fontSize: '16px',
        drag: false,
        mouseup: function(pos) {

            qcanvas.lower(redRect);


        }
    })

    qcanvas.text({
        start: [200, 80],
        text: 'redRect置顶',
        color: 'blue',
        fontSize: '16px',
        drag: false,
        mouseup: function(pos) {

            qcanvas.raiseToTop(redRect);


        }
    })

    qcanvas.text({
        start: [200, 100],
        text: 'redRect置底',
        color: 'yellow',
        fontSize: '16px',
        drag: false,
        mouseup: function(pos) {

            qcanvas.lowerToBottom(redRect);


        }
    })
		</code>
	</pre>
    </div>
    <script src='Qcanvas-v2.0.js'></script>
    <script>
    var qcanvas = new Qcanvas({
    	id: 'qcanvas',
	    width: 300,
	    height: 200,
    });

    var redRect = qcanvas.rect({
        start: [0, 0],
        width: 200,
        height: 200,
        drag: false,
        borderColor: 'red',
        fillColor: 'red',
    })

    var greenRect = qcanvas.rect({
        start: [50, 50],
        width: 170,
        height: 170,
        drag: false,

        borderColor: 'green',
        fillColor: 'green',
    })
    var blueRect = qcanvas.rect({
        start: [100, 100],
        width: 120,
        height: 120,
        drag: false,
        borderColor: 'blue',
        fillColor: 'blue',
    })


    qcanvas.text({
        start: [200, 40],
        text: 'redRect上移一层',
        color: 'blue',
        fontSize: '16px',
        drag: false,
        mouseup: function(pos) {

            qcanvas.raise(redRect);


        }
    })

    qcanvas.text({
        start: [200, 60],
        text: 'redRect下移一层',
        color: 'blue',
        fontSize: '16px',
        drag: false,
        mouseup: function(pos) {

            qcanvas.lower(redRect);


        }
    })

    qcanvas.text({
        start: [200, 80],
        text: 'redRect置顶',
        color: 'blue',
        fontSize: '16px',
        drag: false,
        mouseup: function(pos) {

            qcanvas.raiseToTop(redRect);


        }
    })

    qcanvas.text({
        start: [200, 100],
        text: 'redRect置底',
        color: 'yellow',
        fontSize: '16px',
        drag: false,
        mouseup: function(pos) {

            qcanvas.lowerToBottom(redRect);


        }
    })
    </script>
</body>

</html>